<!-- <template>
	<view class='register'>
		<view class='inp'>
			<view class='username'>
				<label>用户名:</label>
				<input type="text" placeholder="用户名" v-model="user_name" />
			</view>
			
			<view class="password">
				<label>密码:</label>
				<input type="text" placeholder="密码" v-model="password" password />
			</view>
			
		</view>
		<view class='button'>
			<button @click="finishRegister">注册</button>
		</view>
	</view>
</template> -->
<template>
	<view class="register">
		<view class="inp">
			<view class='updata'>
				<label>名称:</label>
				<input type="text" placeholder="用户名" v-model="user.user_name" />
			</view>
			<view class='updata'>
				<label>密码:</label>
				<input type="text" placeholder="密码" v-model="user.password" />
			</view>
			<view class='updata'>
				<label>昵称:</label>
				<input type="text" placeholder="昵称" v-model="user.author_name" />
			</view>
			<!-- <view class='updata'>
				<label>职业:</label>
				<input type="text" placeholder="职业" v-model="user.professional" />
			</view> -->
			

			<view class="updata2">
				<view class="sex">
					<label>性别:</label>
					<radio-group class="radio" @change="select">
						<view class="option">
							男<radio value="男" name="0" />
						</view>
						<view class="option">
							女<radio value="女" name="1"/>
						</view>	
					</radio-group>
				</view>
				<!-- <view class='explain'>
					<textarea type="text" placeholder="与你的职业相关描述" v-model="user.explain" />
				</view> -->
				<view class='portrait'>
					<view class='portrait-title'>头像:</view>
					<view class="portrait-image-box">
							<view class="image-box" @click="addImage">
								<view class="image-box"  v-if="user.avatar !=''" >
								  <image :src="user.avatar" mode="aspectFill"></image>
								</view>
							    <view v-else>
							      <uni-icons  type="plusempty" size="50" color="#eee"></uni-icons>
							    </view>
							</view>
					</view>
				</view>
			</view>
			
			
		</view>
		
		
		<view class="btn">
			<button class='sbmit' @click="finishRegister">注册</button>
			<!-- <button class='sbmit' @click="submit">提交</button> -->
			<button @click="toLogin">返回登录</button>
		</view>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				// user_name:'',
				// password:'',
				userId:'',
				user:{
					id:'',
					user_name:'',
					password:'',
					author_name:'',
					avatar:'',
					// explain:'',
					gender:'',
					// professional:''
				}
			}
		},
		methods:{
			//性别
			select(evt) {
			   console.log(evt.detail.value)
			   this.user.gender = evt.detail.value
			 },
			 //返回登录页面
			 toLogin(){
				 console.log('回去登录')
				 uni.navigateBack({
				
				 })
			 },
			//添加头像
			addImage(){
				// _this=this
				console.log('添加图片')
			  uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: (res)=> {
				        console.log(JSON.stringify(res.tempFilePaths));
						let path = JSON.stringify(res.tempFilePaths).replace('["',"");
						
						this.user.avatar = path.replace('"]',"")
						console.log(this.user.avatar)
				    }
				});
			},
			//注册提交
			finishRegister(){
				uniCloud.callFunction({
					name:"register",
					// data:{"user_name":this.user_name, "password":this.password},
					data:this.user,
					success:(res)=>{
						const data=res.result;
						console.log(res)
						if(data.status == 1){
							uni.showToast({
								title:data.msg,
								icon:"none"
							})
							return
						}else if(data.status == 2){
							uni.showToast({
								title:data.msg,
								icon:"none"
							})
							return
						}
						//成功注册，跳回登录页
						uni.showToast({
							title:data.msg,
							// icon:"none"
						})
						setTimeout(function(){
							uni.redirectTo({
							    url:"../login/login"
							})
						},1000)
						
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
// .register{
// 	// margin:50upx 20upx;
// 	padding-top:100upx;
	
// 	.inp{
// 		// border:1px solid blue;
// 		display: flex; 
// 		flex-direction: column;
// 		align-items: center;
// 		margin: 80upx 0 80upx 0;
// 		font-size:20upx;

// 		.username,.password{
// 			 // text-align:center;
// 			 font-size:20px;
// 			 display:flex;
// 			  // align-items: center;
// 			 margin-bottom:30upx;

// 			 input{
// 				  padding-left: 25upx;
// 				  margin-left: 25upx;
// 				  border-bottom:1px solid black;
// 			 }
// 		}
// 	}
// 	.button{
// 		// border:1px solid blue;
// 		padding:0 10%;
// 		margin-top: 30%;
// 		button{
// 			margin-top:5px;
// 			background-color: #5ea666;
// 			color:#FFFFFF;
// 		}
// 	}
// }
	
	
	.register{
		
		padding-top:20px;
		color:#666;
		
		.inp{
			// /* display: flex; 
			// flex-direction: column;
			// align-items: center;
			// padding: 10upx 0 10upx 0;
			font-size:20px;
			// border:1px solid red;
			padding:0;
			margin-bottom: 0px;
			
			.updata{
				display: flex;
				// flex-direction: column;
				// justify-content: center;
				// align-items: center;
				margin:20px;
				// background-color: green;
				border-bottom:1px solid #808080;
				
				input{
					 width:80%;
					 font-size:20px;
					 display:flex;
					 margin-bottom:15px;
					 padding-right: 0px;
					 margin-left: 11px;
					 // border-bottom:1px solid #808080;
					 
				}
				
				
			}
			.updata2{
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding:0 10px 0 10px;
				.sex{
					display:flex;
					flex-direction: row;
					margin-bottom:10px;
					 .radio{
						 display:flex;
						 flex-direction: row;
						 
						 .option{
							 margin-left: 10upx;
							 margin-right:10upx;
						 }
					 }
				}
				.explain{
					// flex-direction: column;
					// align-items: center;
					textarea{
						width:100%;
						border:1px solid #999999;
					}
				}
				
				.portrait{
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					// border:1px solid red;
					margin-top:10px;
					// padding-left: 5%;
					
					.portrait-title{
						// margin:15px 35px;
						// margin-bottom: 0;
						font-size: 20px;
						color:#666;
					}
					.portrait-image-box{
						width: 100%;
						height:100px;
						// position:relative;
						// border:1px solid blue;
						display: flex;
						flex-wrap: wrap;
						// padding:10px;
						// margin-left: 30px;
						
						.image-box{
							width:100px;
							height:100px;
							// background-color: red;
						    display: flex;
							justify-content: center;
							align-items: center;
							// position: absolute;
							// top:5px;
							// right: 5px;
							// left:5px;
							// bottom: 5px;
							border:1px solid #eee;
							border-radius: 5px;
							overflow: hidden;
				
							image{
								height:100%;
								width: 100%;
							}
						}
						
					}
				}
			}
	
			
		}
		.btn{
			// border:1px solid red;
			display: flex;
			justify-content: center;
			margin-top: 10%;
			button{
				width:40%;
				margin:10px;
				background-color: #5ea666;
				color:#FFFFFF;
			}
		}
		
		
	}
</style>
